<div class="video-wrapper-inner"  ng-mousemove="showControls()" ng-mouseleave="delayHideControls()" ng-class="{'controls-visible': controlsVisible}">

  <div>
    <div class="volume-info" ng-show="volumeChanged">
      {{volumeLevel * 10}}% Volume
    </div>

    <div class="volume-info" ng-show="currentTimeChanged">
      <br>
      <strong ng-show="currentTime">
        <span>{{currentTime | secondsToTimeDisplay}}</span>
      </strong>
      <span>{{videoDuration | secondsToTimeDisplay}}</span>
    </div>
  </div>

  <i class="ion-android-arrow-back player-back" ng-class="{'visible': controlsVisible}" ng-click="closeVideo()"></i>


  <div class="spinner" ng-show="loading">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
  </div>

  <div class="overlay" ng-class="{'visible': overlayVisible}" ng-if="options.videoOverlayEnabled">
    <div class="video-info">
      <p>You're watching</p>

      <h1>{{options.videoMetaTitle}}</h1>
      <h3>{{options.videoMetaSubtitle}}</h3>
      <p ng-if="!isMobile">{{options.videoMetaDescription}}</p>
    </div>
  </div>


  <div class="next-video-overlay" ng-if="isNextVideoShowing">
      <div class="row next-video-overlay-inner">
        <div class="col-xs-3">
          <streama-video-image video="options.nextVideo" type="poster" size="154"></streama-video-image>
        </div>
        <div class="col-xs-8">
          <h4>{{'VIDEO.UPNEXT' | translate}}</h4>
          <h3>{{options.nextVideo.fullTitle || options.nextVideo.title}}</h3>
          <p>{{options.nextVideo.overview.length > 150 ? options.nextVideo.overview.substring(0, 150) + '...' : options.nextVideo.overview}}</p>

          <button class="play-button with-label" ng-click="next()"> <span class="play-label">play now</span> <i class="ion-ios-play"></i></button>
        </div>
      </div>
  </div>

  <i ng-if="isMobile && !playing && canplay" class="play-button ion-ios-play" ng-click="pause();play()"></i>

  <div class="player-controls-wrapper player-active no-select" ng-class="{'visible': controlsVisible}" ng-hide="loading && !initialPlay">

    <div class="slider-ui-wrapper" ng-show="!volumeOpen">
      <div id="playerDurationSlider" class="player-ui-slider" ui-slider="scrubberOptions" min="0" max="{{videoDuration}}" ng-model="currentTime"></div>
      <div class="time-display">
        <strong ng-show="currentTime">
          <span ng-if="currentTime >= 3600">{{currentTime | secondsToDateTime | date:'hh:mm:ss'}}</span>
          <span ng-if="currentTime < 3600">{{currentTime | secondsToDateTime | date:'mm:ss'}}</span>
        </strong>
        <span ng-if="videoDuration >= 3600">{{videoDuration | secondsToDateTime | date:'hh:mm:ss'}}</span>
        <span ng-if="videoDuration < 3600">{{videoDuration | secondsToDateTime | date:'mm:ss'}}</span>
      </div>
    </div>

    <section class="player-control-bar no-select">
      <div class="player-control-button player-skip-rewind icon-rotate-ccw3" ng-click="skip('rewind', 10)">
        <span class="player-skip-number">10</span>
      </div>
      <div class="player-control-button player-skip-fast-forward icon-rotate-cw3" ng-click="skip('fastForward', 10)">
        <span class="player-skip-number">10</span>
      </div>

      <div class="player-control-button player-play-pause play ion-play" ng-show="!playing" ng-click="play()"></div>
      <div class="player-control-button player-play-pause play ion-pause" ng-show="playing" ng-click="pause()"></div>


      <div class="volume-control player-control-button volume" ng-mouseleave="volumeOpen = false" ng-mouseenter="volumeOpen = true">
        <i ng-class="{
        'ion-volume-mute': volumeLevel == 0,
        'ion-volume-low': volumeLevel > 0 && volumeLevel < 3,
        'ion-volume-medium': volumeLevel >= 3 && volumeLevel < 6,
        'ion-volume-high': volumeLevel >= 6
        }" ng-click="playerVolumeToggle()"
        ></i>

        <div id="player-menu-volume" class="player-menu" ng-show="volumeOpen">
          <div class="volume-menu-content">

            <div id="playerVolumeSlider" class="player-ui-slider volume-scrubber" ui-slider="volumeScrubberOptions"  min="0" max="10" step="1" ng-model="volumeLevel"></div>
          </div>
        </div>
      </div>


      <div class="player-status">
        <span class="player-status-main-title">{{options.videoMetaTitle}}</span>
        <span>{{options.videoMetaSubtitle}}</span>
      </div>

      <a class="player-control-button player-next-episode ion-edit" ng-click="options.onEditVideo()" ng-if="$root.currentUser.isContentManager"></a>

      <a class="player-control-button player-next-episode ion-ios-cloud-download" ng-if="options.showDownloadButton" href="{{options.videoSrc}}" download="{{options.originalFilename}}"></a>

      <div class="player-control-button player-next-episode ion-ios-skipforward" ng-if="options.showNextButton" ng-click="next()"></div>

      <div class="player-control-button player-episode-selector" ng-if="options.showEpisodeBrowser">
        <i class="ion-ios-browsers" ng-click="episodeBrowseOpen = !episodeBrowseOpen"></i>
        <div id="player-menu-episode-selector" class="player-menu" ng-show="episodeBrowseOpen">
          <div class="episode-selector-container">
            <div class="episode-selector-slider" ng-class="{'slide-left': options.selectedEpisodes}">
              <div class="season-list-container">
                <h2 class="seasons-title">{{options.videoMetaTitle}}</h2>
                <ul class="season-list">
                  <li class="season" ng-click="toggleSelectEpisodes(episodes)"
                      ng-repeat="(season, episodes) in options.episodeList">
                    <span>{{'VIDEO.SEASON' | translate}} {{season}}</span>
                  </li>
                </ul>
              </div>
            </div>

            <div class="episode-selector-slider" ng-class="{'slide-left': options.selectedEpisodes}">
              <div class="season-list-container">
                <h2 class="seasons-title" ng-click="toggleSelectEpisodes()">
                  <span class="back-button"><i class="ion-chevron-left"></i></span>
                  {{'VIDEO.SEASON' | translate}} {{options.selectedEpisodes[0].season_number}}
                </h2>
                <ul class="episode-list">
                  <li class="episode" ng-repeat="episode in options.selectedEpisodes"
                      ng-class="{'current': (episode.episode_number == options.currentEpisode.episode && episode.season_number == options.currentEpisode.season), 'no-files': !episode.hasFile}" >
                    <div class="flex-wrapper">
                      <span class="episode-number">{{episode.episode_number | padnumber:2}}</span>
                      <span class="episode-name" ng-click="visible = !visible">{{episode.name}}</span>
                      <span class="episode-play" ng-if="episode.hasFile" ui-sref="player({videoId: episode.id})"><i class="ion-play"></i></span>
                    </div>
                    <streama-progress-bar ng-if="episode.currentPlayTime" video="episode" hide-time="true"></streama-progress-bar>


                    <div class="extra-episode-info" ng-if="visible || (episode.episode_number == video.episode_number && episode.season_number == video.season_number)">
                      <div class="image-wrapper">
                        <img ng-if="episode.still_path" ng-src="https://image.tmdb.org/t/p/w92/{{episode.still_path}}"/>
                        <img ng-if="!episode.still_path && episode.still_image_src" ng-src="{{episode.still_image_src}}"/>
                        <div ng-if="!episode.still_path && !episode.still_image_src" class="fallback-image"></div>
                      </div>

                      <p>{{episode.overview.length > 250 ? (episode.overview.substring(0, 250) + '...') : episode.overview}}</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="player-control-button player-fill-screen ion-android-wifi" ng-if="options.showSocketSession" ng-click="createNewPlayerSession()"></div>
      <!--<div class="player-control-button player-fill-screen ion-android-textsms" ng-if="options.videoTrack" ng-class="{'inactive': !isTextTrackVisible}" ng-click="toggleTextTrack()"></div>-->



      <div class="player-control-button player-fill-screen ion-android-textsms" ng-if="options.subtitles.length >= 1 || options.videoFiles.length > 1" ng-click="openPlaybackOptions()"></div>





















      <div class="player-control-button player-fill-screen"
           ng-click="fullScreen()" ng-class="{'ion-arrow-shrink': isFullScreen, 'ion-arrow-expand': !isFullScreen}"></div>
    </section>
  </div>

  <video ng-if="isInitialized" id="video" ng-src="{{options.videoSrc}}" type="{{options.videoType}}" ng-click="clickVideo()" class="subtitle-size-{{options.subtitleSize}} subtitle-size-custom-{{getCustomSubtitleSize()}}">
    <track ng-repeat="subtitle in options.subtitles" ng-src="{{subtitle.src}}" kind="subtitles" id="subtitle-{{subtitle.id}}"
           srclang="{{subtitle.subtitleSrcLang}}" label="{{subtitle.subtitleLabel}}" src="{{subtitle.src}}">
  </video>

</div>


